<template>
	<view class="content">
		<video class="vue3VideoPlay" :src="vue3VideoPlayUrl" autoplay loop muted :controls="false"></video>
		<view class="rightLayout">
			<view v-for="(item, index) in homeIcon" :key="item.id">
				<div @click="goRedd(index)" class="homeIconimgs" ref="floor" style="position: relative">
					<img :src="currentIndex === index ? item.src2 : item.src1" alt="图标" class="imgIcon" />
					<span :class="currentIndex === index ? 'hometext' : 'hometext1'">{{ item.name }}</span>
					<div v-if="index === 1&&currentIndex==1" class="showFloorDiv">
						<div v-for="i in 3">
							<div @click.stop="changeFloorIndex(i)" :class="{ highLightFloor: currShowFloor === i }">
								{{ i }}F
								<div class="bg"></div>
							</div>
						</div>
					</div>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
	import $config from '@/common/config.js';
	import {
		VIDEOLIST
	} from "@/common/const_data.js";
	export default {
		data() {
			return {
				title: 'Hello',
				currentIndex: 0,
				currShowFloor: 1,
				vue3VideoPlayUrl: '/static/video/homeVideo.mp4',
				homeIcon: [{
						id: '1',
						src1: $config.comstatic + '/shouyeicons/zh.png',
						src2: $config.comstatic + '/shouyeicons/szh.png',
						name: '综合',
						code: 'zonghe',
					},

					{
						id: '2',
						src1: $config.comstatic + '/shouyeicons/lc.png',
						src2: $config.comstatic + '/shouyeicons/slc.png',
						name: '楼层',
						code: 'floor',
					},

					{
						id: '3',
						src1: $config.comstatic + '/shouyeicons/xf.png',
						src2: $config.comstatic + '/shouyeicons/sxf.png',
						name: '新风',
						code: 'newtrend',
					},

					{
						id: '4',
						src1: $config.comstatic + '/shouyeicons/nt.png',
						src2: $config.comstatic + '/shouyeicons/snt.png',
						name: '暖通',
						code: 'nuantong',
					},

					{
						id: '5',
						src1: $config.comstatic + '/shouyeicons/zm.png',
						src2: $config.comstatic + '/shouyeicons/szm.png',
						name: '照明',
						code: 'light',
					},

					{
						id: '6',
						src1: $config.comstatic + '/shouyeicons/tp.png',
						src2: $config.comstatic + '/shouyeicons/stp.png',
						name: '碳排放',
						code: 'tanpaifang',
					},
					{
						id: '7',
						src1: $config.comstatic + '/shouyeicons/guangfu.png',
						src2: $config.comstatic + '/shouyeicons/sguangfu.png',
						name: '光伏',
						code: 'guangfu',
					},
				]
			}
		},
		onLoad() {
			// plus.screen.lockOrientation('default');
		},
		methods: {
			goRedd(index) {
				this.currentIndex = index;
				this.vue3VideoPlayUrl = '/static' + VIDEOLIST[index].url
			},
			changeFloorIndex(index) {
				this.currShowFloor = index;
				this.vue3VideoPlayUrl = 'http://portal.xumengte.com/video/new/floor' + index + '.mp4';
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.vue3VideoPlay {
		width: 80vw;
		height: 100vh;
	}

	.rightLayout {
		right: 0;
		position: absolute;
		display: flex;
		flex-direction: column;
		width: 12vw;
		height: 100vh;
		background-color: rgba(255, 255, 255, 0.3);
	}

	.homeIconimgs {
		display: flex;
		flex: 1;
		height: 100%;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		margin-right: 4%;
		margin-top: 1vh;
		z-index: 2;
	}

	.imgIcon {
		display: flex;
		height: 4vh;
		max-height: 48px;
	}

	.hometext,
	.hometext1 {
		font-size: 1.4vh;
		text-align: center;
		font-weight: bold;
		letter-spacing: 1px;
	}

	.hometext {
		color: #fff;
	}

	.hometext1 {
		color: rgba(255, 255, 255, 0.5);
	}

	.showFloorDiv {
		position: absolute;
		color: white;
		right: 95%;
		top: -100%;
		border-radius: 10px;
	}

	.showFloorDiv>div {
		width: 90px;
		text-align: center;
		height: 28px;
		font-size: 18px;
		color: #b6b6b6;
		padding: 5px 0;
		margin-bottom: 20px;
		z-index: 99;
	}

	.highLightFloor {
		background: linear-gradient(270deg,
				rgba(137, 205, 255, 0) 0%,
				rgba(137, 205, 255, 0.3) 29%,
				rgba(137, 205, 255, 0.5) 54%,
				rgba(137, 205, 255, 0.3) 73%,
				rgba(137, 205, 255, 0) 100%);
		width: 100%;
		height: 100%;
		font-size: 22px;
		position: relative;
		color: white;
	}

	.highLightFloor .bg {
		position: absolute;
		height: 30px;
		width: 30px;
		top: 0;
		left: -28px;
		background: url('http://portal.xumengte.com/homeImg/Group156.png') no-repeat 50% 50%;
		background-size: 120px 120px;
		content: '';
		z-index: -1;
	}
</style>
